<template>
<div class="ivu-card ivu-card-bordered ivu-card-dis-hover">
  <div class="ivu-card-head">
    <p>{{ $route.meta.title }}</p>
    <router-link :to="{name:'userCreate'}" class="ivu-btn ivu-btn-primary">创建会员</router-link>
  </div>

  <div class="ivu-card-body">
    <Input placeholder="请输入用户名" style="width: 20%" v-model="searchAccount">
      <Button slot="append" type="primary" icon="search" @click="clickSearch">搜索</Button>
    </Input>
  </div>

  <div class="ivu-card-body">
		<p>会员总数: {{ pager.totalItems }}</p>
		<Table :columns="list.columns" :data="list.items" :loading="list.loading" />
	</div>

  <div class="ivu-card-body"><Page :current="pager.current" :total="pager.totalItems" :page-size="pager.limit" show-total @on-change="onChangePage"></Page></div>
</div>
</template>
<script>
import { Table, Page, Message, Input, Button } from 'iview';
import ajaxiView from '@/utils/ajaxiView';
import apiConfig from '@/utils/apiConfig';
import config from '@/config';
import auth from '@/utils/auth';

export default {
  components: {
    [Table.name]: Table,
    [Page.name]: Page,
    [Input.name]: Input,
    [Button.name]: Button
  },
  data() {
    return {
      searchAccount: '',
      apiConfig: {},
      config,
      token: auth.getToken(),
      list: {
        columns: [
          {title: 'ID', key: 'user_id', align: 'center'},
          {title: '推荐人', key: 'p_account', align: 'center'},
          {title: '手机', key: 'cellphone', align: 'center'},
          {title: '用户名', key: 'account', align: 'center'},
          {title: '开户票', key: 'price_activation', align: 'center'},
          {title: '业务积分', key: 'price_business', align: 'center', render: (h, params) => { return h('span', Math.round(params.row.price_business, 2)); }},
          {title: '零售积分', key: 'price_retail', align: 'center', render: (h, params) => { return h('span', Math.round(params.row.price_retail, 2)); }},
          {title: '商城积分', key: 'price_shop', align: 'center', render: (h, params) => { return h('span', Math.round(params.row.price_shop, 2)); }},
          {title: '交易票', key: 'price_trade', align: 'center'},
          {title: '等级', key: 'level', align: 'center', render: (h, params) => { return h('span', this.apiConfig['user_level'][params.row.level]); }},
          {title: '创建时间', key: 'create_time', align: 'center', render: (h, params) => { return h('span', new Date(parseInt(params.row.create_time) * 1000).toLocaleString()); }},
          {title: '状态', key: 'status', align: 'center', render: (h, params) => { return h('span', this.apiConfig['user_status'][params.row.status]); }},
          {title: '操作', key: 'action', align: 'center', width: 200, render: (h, params) => {
            var _this = this;
            var opeare = [
              h('a', {
                class: 'ivu-btn ivu-btn-primary ivu-btn-small',
                on: {
                  click() {
                    _this.$router.push({name: 'userUpdate', params: {'id': params.row.user_id}});
                  }
                }
              }, '修改')
            ];

            opeare.push(
              h('a', {
                class: 'ivu-btn ivu-btn-info ivu-btn-small',
                on: {
                  click() {
                    _this.$router.push({name: 'userTeam', params: {'id': params.row.user_id}, query: {'account': params.row.account}});
                  }
                }
              }, '分享人')
            );

            opeare.push(
              h('a', {
                class: 'ivu-btn ivu-btn-info ivu-btn-small',
                on: {
                  click() {
                    _this.$router.push({name: 'userParent', params: {'id': params.row.user_id}, query: {'account': params.row.account}});
                  }
                }
              }, '推荐人')
            );

            opeare.push(
              h('a', {
                class: 'ivu-btn ivu-btn-warning ivu-btn-small',
                attrs: {
                  href: this.config.appUrl + '#/into?token=' + params.row.token,
                  target: '_blank'
                }
              }, '进入')
            );

            return h('div', opeare);
          }}
        ],
        loading: false,
        items: []
      },
      pager: {
        current: 1,
        limit: 10,
        totalItems: 0
      }
    };
  },
  methods: {
    _initialize() {
      var _this = this;
      apiConfig.getItem().then(function(api_config) {
        _this.apiConfig = api_config;
        _this.getData();
      });
    },
    getData() {
      let _this = this;
      _this.list.loading = true;
      ajaxiView.get('/backstage/user?token='+_this.token+'&page='+_this.pager.current+'&account='+_this.searchAccount).then(function(data) {
        if(data !== false && typeof(data.pager) != 'undefined') {
          _this.list.items = data.pager.items;
          _this.pager.limit = data.pager.limit;
          _this.pager.totalItems = data.pager.total_items;

          _this.list.loading = false;
        }
      });
    },
    onChangePage(current) {
      this.pager.current = current;
      this.getData();
    },
    clickSearch() {
      if (this.searchAccount === '') {
        Message.warning('请输入用户名');
      } else {
        this.onChangePage(1);
      }
    }
  },
  mounted() {
    this._initialize();
  }
}
</script>
<style>
.ivu-table-cell .ivu-btn.ivu-btn-small {
  margin-right: 5px;
}
</style>